<template>
	<view class="container">
		<view class="top" v-if="data">
			<view class='status' v-if="data.status == 0">待付款</view>
			<view class='status' v-if="data.status == 1">待使用</view>
			<view class='status' v-if="data.status == 2">已使用</view>
			<view class='status' v-if="data.status == 3">已取消</view>
			<view class='status' v-if="data.status == 4">申请中</view>
			<view class='status' v-if="data.status == 5">已退款</view>
			<view class='status' v-if="data.status == 6">已拒绝</view>
			<view class="time" v-if="data.status == 0">剩余时间：{{Minute}}:{{Second}}</view>
		</view>
		<view class="product" v-if="data">
			<view class="item">
				<image class="cover" :src="data.cover"></image>
				<view class="right_info">
					<view class="title">{{data.part_title}}</view>
					<view class="price_num">
						<view class="price">¥{{data.price}}</view>
						<view class="num"></view>
					</view>
					<view class="desc">{{data.desc}}</view>
				</view>
			</view><!-- item end -->
		</view>
		
		<view class="ticket" v-if="data.status == 1">
			<zb-code :size="400" :ref="'qrCodeYcq'" cid="qr-code-ycq" :val="data.s_no"></zb-code>
		</view>
		
		<view class="order_info" v-if="data != undefined">
			<view class="title">订单信息</view>
			<view class="section">
				<view class="name">订单号：</view>
				<view class="text">{{data.s_no}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">下单时间：</view>
				<view class="text">{{data.created_time}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">姓名：</view>
				<view class="text">{{data.name}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">手机号码：</view>
				<view class="text">{{data.phone}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">身份证号码：</view>
				<view class="text">{{data.id_card}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">成人票：</view>
				<view class="text">{{data.adu_num}}</view>
			</view><!--section end-->
			<view class="section">
				<view class="name">儿童票：</view>
				<view class="text">{{data.child_num}}</view>
			</view><!--section end-->
			<view class="section" v-if="data.pay_time">
				<view class="name">支付金额：</view>
				<view class="text">{{data.price}}</view>
			</view><!--section end-->
			<view class="section" v-if="data.pay_time">
				<view class="name">支付时间：</view>
				<view class="text">{{data.pay_time|formatDate}}</view>
			</view><!--section end-->
			<view class="section" v-if="data && data.status == 5">
				<view class="name">退款金额：</view>
				<view class="text">{{data.price}}</view>
			</view><!--section end-->
			<view class="section" v-if="data && data.status == 5">
				<view class="name">退款时间：</view>
				<view class="text">{{data.refund_time|formatDate}}</view>
			</view><!--section end-->
		</view>
		<view class="cost_info" v-if="data.bracelet != undefined">
			<view class="title">消费信息</view>
			<view class="secs" v-for="b in data.bracelet">
				<view class="sec">
					<view class="name">手环编号：</view>
					<view class="text">{{b.b_name}}</view>
				</view>
				<view class="sec">
					<view class="name">手环押金：</view>
					<view class="text">{{b.deposit}}</view>
				</view>
				<view class="sec">
					<view class="name">消费金额：</view>
					<view class="text">{{b.total}}</view>
				</view>
			</view>
		</view>
		
		<!--底部按钮-->
		<view class="bnt acea-row fixed-bottom" v-if="data.status != 4">
			<view class="btn red" @click="goCancel()" v-if="data.status == 0">取消订单</view>
			<view class="btn" @click="goPay()" v-if="data.status == 0">立即支付</view>
			<view class="btn" @click="goRefund()" v-if="data.status == 1 || data.status ==6">申请退款</view>
			<view class="btn red" @click="goDel()" v-if="data.status == 2 || data.status == 3 || data.status ==5">删除订单</view>
		</view>
		<uni-popup ref="popup" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					扫一扫二维码
				</view>
				<view class="center">
					<image class="qr_img" :src="qr_img"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import zbCode from '@/components/zb-code/zb-code.vue'
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	
	import {
		ticketPay
	} from "@/api/show";


	import {water_order_detail,cancel_order,water_order_refund,del_order,pay} from "@/api/water";
	export default {
		components: {
			zbCode
		},
		data() {
			return {
				id:0,
				data:undefined,
				nowSecond:120,
				Minute:"00",
				Second:"00",
				timer:''
			};
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.init()
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null;
		},
		computed: {
			
		},
		methods: {
			// 计算剩余时间
			getTime(){
				let that = this;
				  this.timer = setInterval(()=>{
					that.countDown();
					if(that.nowSecond <= 0){ // 时间为0，销毁
						//取消订单
						that.autoCancel();
						clearInterval(that.timer)
						that.timer = null;
					}
				  },1000)
			},
			countDown(){
				  this.nowSecond = this.nowSecond - 1;
				  var m = parseInt(this.nowSecond/60%60) // 分
				  m = m <10 ? '0' + m : m;
				  var s = parseInt(this.nowSecond % 60);//秒
				  s = s <10 ? '0' + s : s;
				  if(this.nowSecond <= 0){ // 小于0，永远为 00:00
					this.Minute = '00';
					this.Second = '00';
				  }else{
					this.Minute = m;
					this.Second = s;
				  }
			},
			showDown(nowSecond){
				var m = parseInt(nowSecond/60%60) // 分
				m = m <10 ? '0' + m : m;
				var s = parseInt(nowSecond % 60);//秒
				s = s <10 ? '0' + s : s;
				if(this.nowSecond <= 0){ // 小于0，永远为 00:00
					this.Minute = '00';
					this.Second = '00';
				}else{
					this.Minute = m;
					this.Second = s;
				}
			},
			showQr(url){
				console.info("显示二维码：",url);
				this.qr_img = url;
				this.$refs.popup.open('center')
			},
			refund() {
				water_order_refund(this.id).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 200)
					} else {
						this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			previewCode(item) {
				uni.previewImage({
					urls: [item.sn_url]
				})
			},
			init() {
				let that = this;
				water_order_detail(this.id).then(res => {
					that.data = res.data;
					if(that.data.status ==1 || that.data.status == 4 || that.data.status == 6){
						that.$nextTick(() => {
							that.$refs['qrCodeYcq']._makeCode();
						})
					}
					//未支付，倒计时
					if(that.data['status'] == 0 && that.data['seconds'] > 0){
						that.showDown(that.data['seconds']);
						that.nowSecond = that.data['seconds'];
						that.getTime();
					}
				})
			},
			goDel(){
				let _this = this
				uni.showModal({
					title: '删除',
					content: '确定要删除订单吗',
					success: function(res) {
						if (res.confirm) {
							del_order(_this.id).then(res => {
								if (res.status == 200) {
									_this.$util.Tips({
										title: res.message,
										icon: 'success'
									})
									uni.$on('update')
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 200)
								} else {
									_this.$util.Tips({
										title: res.message,
										icon: 'error'
									})
								}
								console.log(res);
							}).catch(er => {
								_this.$util.Tips({
									title: er,
									icon: 'error'
								})
							})
						//end if confirm
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			autoCancel() {
				let _this = this
				cancel_order(_this.id).then(res => {
					if (res.status == 200) {
						_this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						_this.init();
					} else {
						_this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					_this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			goCancel() {
				let _this = this
				uni.showModal({
					title: '取消',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							cancel_order(_this.id).then(res => {
								if (res.status == 200) {
									_this.$util.Tips({
										title: res.message,
										icon: 'success'
									})
									uni.$on('update')
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 200)
								} else {
									_this.$util.Tips({
										title: res.message,
										icon: 'error'
									})
								}
								console.log(res);
							}).catch(er => {
								_this.$util.Tips({
									title: er,
									icon: 'error'
								})
							})
						//end if confirm
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goRefund() {
				let _this = this
				uni.showModal({
					title: '退票',
					content: '确定要退票吗',
					success: function(res) {
						if (res.confirm) {
							_this.refund()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goPay() {
				if(this.handle){
					return;
				}
				let _this = this
				uni.showModal({
					title: '退票',
					content: '确定要退票吗',
					success: function(res) {
						if (res.confirm) {
							_this.handle = true;
							// 支付
							pay({
								order_sn: _this.data['s_no'],
								pay_type: 2
							}).then(res2 => {
								let config = res2.data.result.config
								uni.requestPayment({
									timeStamp: config.timestamp,
									nonceStr: config.nonceStr,
									package: config.package,
									signType: config.signType,
									paySign: config.paySign,
									success: (res1) => {
										_this.handle = false;
										uni.hideLoading();
										_this.init();
										uni.showToast({
											title:'支付成功',
											icon:'none'
										});
									},
									fail: () => {
										_this.handle = false;
										uni.hideLoading();
										this.$util.Tips({
											title: '支付失败'
										});
										uni.navigateBack({
											delta: 2
										})
									},
									complete: (res) => {
										_this.handle = false;
										uni.hideLoading();
										if (res.errMsg == 'requestPayment:cancel') return this
											.$util
											.Tips({
												title: '取消支付'
											});
									}
								}).catch(res => {
									_this.handle = false;
									uni.hideLoading();
									_this.$util.Tips({
										title: res.message
									});
								})
							//pay catch
							}).catch(res => {
								_this.handle = false;
								uni.hideLoading();
								_this.$util.Tips({
									title: res.message
								});
							});
						//end if confirm
						} else if (res.cancel) {
							_this.handle = false;
							console.log('用户点击取消');
						}
					}
				});
				
			},
			
		}
	};
</script>

<style lang="scss">
	.container{
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.top{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: white;
		align-items: center;
		.status{
			font-size: 30rpx;
			font-weight: bold;
			color: black;
		}
		.time{
			font-size: 28rpx;
			color: red;
			margin-top: 50rpx;
		}
	}
	.product{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin-top: 20rpx;
		background-color: white;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			.cover{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.right_info{
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				.title{
					font-size: 28rpx;
					color: black;
					font-weight: bold;
				}
				.price_num{
					margin-top: 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.price{
						font-size: 26rpx;
						color: darkorange;
					}
					.num{
						font-size: 26rpx;
						color: black;
					}
				}
				.desc{
					font-size: 22rpx;
					color: gray;
					margin-top: 10rpx;
				}
			}
		}//item end
	}//product end
	/****/
	
	.ticket{
		margin-top: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: white;
		padding: 30rpx;
		border-top: 1rpx dashed #f1f1f1;
	}
	
	.order_info{
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.title{
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
		.section{
			height: 60rpx;
			display: flex;
			flex-direction: row;
			.name{
				font-size: 28rpx;
				color: dimgray;
				width: 170rpx;
			}
			.text{
				font-size: 28rpx;
				color: black;
			}
		}
	}//order_info end
	
	.cost_info{
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 130rpx 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.title{
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
		.secs{
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx dashed #f1f1f1;
			padding-bottom: 20rpx;
			.sec{
				height: 60rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.name{
					font-size: 28rpx;
					color: dimgray;
					width: 170rpx;
				}
				.text{
					font-size: 28rpx;
					color: black;
				}
			}
		}
	}
	
	.bnt {
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		border-top: 1rpx solid #f1f1f1;
		padding-top: 20rpx;
		.btn{
			
			padding: 0rpx 40rpx;
			margin-right: 20rpx;
			height:60rpx;
			line-height: 60rpx;
			text-align: center;
			color: white;
			background-color: #01A1ED;
			border-radius: 30rpx;
		}
		.red{
			background-color: orangered;
		} 
	}
	.footer{
		height: 90rpx;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		border-top: 1rpx solid #f1f1f1;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		background-color: white;
		.btn{
			padding: 0rpx 40rpx;
			margin-right: 20rpx;
			height:60rpx;
			line-height: 60rpx;
			text-align: center;
			color: white;
			background-color: #01A1ED;
			border-radius: 30rpx;
		}
		.red{
			background-color: orangered;
		} 
	}
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		width:90%;
		margin: 30rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.qr_img{
		width:90%;
		height:450rpx;
	}
	.center-check{
		width:90%;
		margin: 50rpx 40rpx 50rpx 40rpx;
		display: flex;
		flex-direction: column;
		height: 300rpx;
		.pop-content{
			height: 300rpx;
			flex:1;
			.section{
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:80rpx;
		background-color: #01A1ED;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}
	
</style>
